EMBED - Embedded Plug-in

"The EMBED tag displays output from a file that is executed by a plug-in. The output is displayed as part of the HTML document in a rectangular area of the page."

"A plug-in is an application written in a language such as C or C++ that has been plugged in to Navigator, so that it acts as an extension to the Navigator browser. When loaded, an embedded plug-in is displayed as part of the HTML document in a rectangular region of the page. This is similar to the way a GIF or JPEG image is embedded, except that the plug-in can be live and respond to user events, such as mouse clicks."

"The EMBED tag has an SRC attribute that specifies the file to run. The TYPE attribute specifies the MIME type of the plug-in needed to run the file. Navigator uses either the value of the TYPE attribute or the suffix of the filename given as the SRC to determine which plug-in to use. You must provide either the SRC or TYPE attribute."

"Users must have the appropriate plug-in installed in their browsers before they can see the results of running an embedded file that uses a plug-in. If a user opens a web document that uses an EMBED tag, and the plug-in needed by the EMBED tag is already installed, the results of running the embedded file are displayed automatically."

"If a user tries to open a web page that loads an uninstalled plug-in, the browser asks if the user wants to to install the plug-in. If the user ignores the prompt to load the plug-in, the browser displays a puzzle piece in the space reserved for the embedded file. The user can click on this at any time to get the Plug-in Finder page. This page takes the MIME type and file extension for the plug-in and tries to match it to available MIME handlers on the web site."

"You can use the NOEMBED tag to provide text to be displayed by browsers that cannot display plug-ins."

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

NAME and ID values must be unique in any document, and different values must differ by more than just the case. Values must begin with a letter in the range A-Z or a-z, and may be followed by A-Z, a-z, 0-9, hyphens, underscores, colons, or periods. When linking to a named anchor, the name is treated as case sensitive.

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is 
   <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

The IMG element specifies an inline image. The required SRC attribute specifies the location of the image. The image can be any format, though browsers generally only support GIF and JPEG images. Support for the PNG image format is growing slowly.

The required ALT attribute provides alternate text for those not loading images. Effective ALT text should generally give the function of the image rather than a description of the image. For example, ALT="Welcome to XYZ Corp." would be more appropriate than ALT="XYZ Corp. Logo" for a company's logo on its welcome page. Good ALT text is crucial to the document's accessibility for the significant portion of users who do not load images; see Use of ALT texts in IMGs for a thorough discussion.

The WIDTH and HEIGHT attributes are most useful when they specify the exact dimensions of the image in pixels. This allows image-loading browsers to reserve the proper amount of space for the image and continue to render the rest of the document, thus giving the appearance of a faster-loading page.

Unfortunately, many graphical browsers will use these dimensions when not loading images, which can cause the ALT text to be cut off if the image is small or the ALT text is large. In such cases, authors may wish to leave off the WIDTH and HEIGHT attributes, depending on the importance of the ALT text and the placement of the image on the page (an image towards the end of the document without WIDTH and HEIGHT attributes will generally not noticeably slow the rendering of the page).

Authors can also specify different dimensions for the WIDTH and HEIGHT attributes, in which case browsers should scale the image. Percentages, relative to the horizontal or vertical space available (not relative to the image's natural size) can also be specified, though these are not as widely supported as pixel lengths. Since browsers typically do a poor job of scaling images, authors should avoid using WIDTH and HEIGHT for this purpose as much as possible.

APPLET's CODE attribute specifies the name of the class file that contains the compiled Applet subclass. The value is relative to the url specified in the CODEBASE attribute, or to the HTML document's base url if the CODEBASE attribute is not given.

<APPLET CODE="Animate.class" WIDTH=100 HEIGHT=100>
<PARAM NAME=img1 VALUE="/images/1.jpg">
<PARAM NAME=img2 VALUE="/images/2.jpg">

<IMG src="animation.gif" ALT="" 
   WIDTH=100 HEIGHT=100>

</APPLET>

The ALIGN attribute, deprecated in HTML 4.0, specifies the alignment of the image. The values top, middle, and bottom specify the image's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the image with the current baseline. To center the image horizontally on the page, place the image in a centered block, e.g.,

<H1 ALIGN=center><IMG src="logo.gif" ALT="Welcome to XYZ Company"></H1>

The other ALIGN values, left and right, specify a floating image; the image is placed at the left or right margin and content flows around it. To place content below the image, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning images.

BORDER

The BORDER attribute, deprecated in HTML 4.0, specifies the width of the image's border. Specifying BORDER=0 will eliminate the border around a linked image in most browsers, though some allow the user to override this. Authors should only use BORDER=0 if the image would be clearly recognizable as a link, or as a method of de-emphasizing a link. For example:

<A href="reference/"><img src="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference</A>

DIR

The DIR attribute value is one of LTR for left to right, or RTL for right to left, e.g. DIR=RTL. Currently this attribute is supported by niether Netscape or MS Internet Explorer.

FRAMEBORDER

The FRAMEBORDER attribute specifies whether or not the frame has a visible border. The default value, 1, tells the browser to draw a border between the frame and all adjoining frames. The value 0 indicates that no border should be drawn, though borders from other frames will override this.

To fully remove the border, some browsers also require the use of other, non-standard attributes. See How do I remove the border around frames? for more details.

Note that removing the border of a frame takes away the user's ability to resize the frame on most browsers.

HIDDEN

"... specifies whether the plug-in is visible on the page. A value of TRUE overrides any HEIGHT and WIDTH to set both the width and height of the area occupied by the output of the embedded file to zero. The default is FALSE."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

PALETTE

"... is relevant only on the Windows platform. A value of FOREGROUND makes the plug-in use the foreground palette. Similarly, a value of BACKGROUND makes the plug-in use the background palette, which is the default. "

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

PLUGINSPAGE

"Retrieves the URL of the plug-in used to view an embedded document."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

PLUGINURL

"... is the URL of a Java Archive (JAR) file, which is a compressed collection of files that can be signed. The default plug-in invokes the JAR Installation Manager (JIM) with this JAR file URL, rather than loading the URL into a window. PLUGINURL takes precedence over PLUGINSPAGE. It is recommended that you use PLUGINURL rather than PLUGINSPAG. Navigator 4.0"

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

TYPE

"When present, this attribute specifies the content type of a piece of content, for example, the result of dereferencing a URI. "

(From the W3C HTML 4.0 Recommendation)

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A href="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A href="/">home</a> | <A href="./">index</a> | <A href="/search.html">search</a></p>
<P><A href="/"><img src="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

VSPACE & HSPACE

The HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the applet. The value must be in pixels and applies to both sides of the applet. Style sheets provide more flexibility in specifying the space around applets.

LANGUAGE

"Sets or retrieves the language in which the current script is written. "

"The language property can refer to any scripting language."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

More Information

Maintained by Jarrod Durnan